<template>
  <div class="bigbox">
    <div class="header">
      <span @click="goshangceng()"
        ><svg-icon iconClass="back" class="zhuo_back"></svg-icon
      ></span>
      <div>支付</div>
    </div>
    <div class="jkl">
      <h3>支付金额</h3>
      <div>
        <h4>￥</h4>
        <van-field
          class="uio"
          type="number"
          readonly
          clickable
          @touchstart.native.stop="show = true"
          placeholder="请输入金额"
          :value="value"
        />
      </div>
    </div>
    <div>
      <van-number-keyboard
        v-model="value"
        :show="show"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @close="topayment()"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "zhifu",
  data() {
    return {
      show: false,
      // allprice: 0,
      value: String(this.$route.query.allpri),
    };
  },
  created() {
    // this.allprice = this.$route.query.allpri;
    // console.log(this.allprice);
  },
  methods: {
    topayment() {
      this.$router.push({ name: "Topayment", query: { value: this.value } });
    },
    goshangceng() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.bigbox {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  font-size: 18px;
}
.header {
  width: 100%;
  height: 60px;
  background-color: #555882;
  color: #ffffff;
  display: flex;
  line-height: 60px;
  div {
    margin: 0 auto;
    padding-right: 40px;
  }
  span {
    padding-left: 20px;
  }
}
.jkl {
  width: 100%;
  height: 200px;
  background-color: #ffffff;
  padding: 20px;
  h3 {
    margin-top: 20px;
  }
  div {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .uio {
      margin-bottom: 20px;
    }
  }
}
</style>
